<script setup lang="ts">
import {onMounted, reactive, Ref, ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {getCaseByRspIdAndStatus} from '@/axios/case/caseReq';
import useRespondentStore from '@/stores/respondent';
import viewRepayment from '@/compontent/viewRepayment.vue';
import {agreeRepaymentPlan, getRepaymentInfoByCaseId} from "@/axios/case/repaymentReq";
import { Case } from '@/types/response/case';
import DetailedCase from '@/compontent/detailedCase.vue';
import Repayment from '@/types/response/repayment';
const respondentStore = useRespondentStore()
//进入调解对话框
const dialogVisible = ref(false)
//当前进入调解的案件的index
const currentCaseIndex=ref(null)
//是否勾选我已阅读
const checked = ref(false)
//查看调解方案对话框
const dialogVisible2 = ref(false)
//当前浏览的调解方案
const currentRepaymentIndex = ref(0)
//总的调解方案
const totalRepaymentCount = ref(0)
//确认调解对话框
const dialogVisible3 = ref(false)
//所有还款方案对话框
const dialogVisible4 = ref(false)
//最后同意的案件index
const agreeRepaymentIndex= ref(null)
//拒绝所有方案原因对话框
const dialogVisible5 = ref(false)
//拒绝原因
const refuseFormData=ref({
	reason: '',
})
//表格数据
const defaultTableDataItem = {
	caseId:null, //案件号
	applicantName:'', //申请人姓名
	// stateText:'已结案', //案件状态文字
	createdTime:'' ,//创建时间
	cause:'' ,//案由
	mediatorName:'' //调解员
}
const tableData = ref([])

//查询案件
onMounted(()=>{
	getCaseList()
})
function getCaseList(){
	tableData.value=[]
	// waitMediate=3;//申请人可见 管理员可见 调解员可见 助理可见 被申请人可见 等待调解人调解
	getCaseByRspIdAndStatus(respondentStore.id,3).then(res=>{
		res.forEach(item=>{tableData.value.push(item)})
	})
}
//案件详情
const defaultCaseInfo={
	caseId:null, //案件号
	applicantName:'', //申请人姓名
	mediationTime:'' ,//调解时间
	createdTime:'' ,//创建时间
	cause:''	, //案由
	mediatorName:'' //调解员

}
const caseInfo=ref({...defaultCaseInfo})

//案件详情对话框
const visible = ref(false)




//关闭案件详情页面时重置数据
// const setDefaultValues2 = () => {
// 	Object.assign(caseInfo.value, defaultCaseInfo)
// 	visible.value = false
// }

//还款信息
const repayments:Ref<Repayment[]>=ref([])

//进入确认调解告知书页面前
const handleEnterRepayment = (index) => {
	currentCaseIndex.value = index


	//查询所有的调解方案
	const caseId=tableData.value[currentCaseIndex.value].caseId
	getRepaymentInfoByCaseId(caseId).then(res=>{
		repayments.value=[]
		res.forEach(item=>{repayments.value.push(item)})
		totalRepaymentCount.value=res.length
	})
	currentRepaymentIndex.value=0


	dialogVisible.value=true

}
//点击查看调解方案时
const handleRepaymentView = () => {
	if(repayments.value.length==0) {
		ElMessage.error('还没有调解方案')
		dialogVisible.value=false
		checked.value = false
		currentCaseIndex.value = 0
		return
	}
	dialogVisible2.value=true
}
//关闭进入调解页面
const handleClose = (done) => {
	checked.value = false
	done()
}
let detailedDialog = reactive({
  visible: false,
  case: new Case(),
  look(c: Case) {
	console.log("look",c);
    detailedDialog.case = c;
    detailedDialog.visible = true;
  },
  close() {
    detailedDialog.visible = false;
  }
})


const nextCase = () => {
	if(currentRepaymentIndex.value < totalRepaymentCount.value-1){
		currentRepaymentIndex.value++
	}else{
		dialogVisible4.value = true
	}
}
const preCase=()=>{
	if(currentRepaymentIndex.value > 0){
		currentRepaymentIndex.value--
	}
}
//点击同意调解方案时
const agreeRepayment = (repaymentIndex) => {
	dialogVisible3.value = true
	agreeRepaymentIndex.value=repaymentIndex
}

//同意调解方案进入确认页面确认后
const handleClose3 = () => {
	//启动该还款方案
	agreeRepaymentPlan(tableData.value[currentCaseIndex.value].caseId,repayments.value[agreeRepaymentIndex.value].repaymentId).then(res=>{
		ElMessage.success('你已同意方案'+(agreeRepaymentIndex.value+1) +'，调解成功')
		setDefaultValues()
	})

}
function setDefaultValues(){
	currentRepaymentIndex.value = 0
	agreeRepaymentIndex.value=0
	currentCaseIndex.value=0
	refuseFormData.value.reason=''
	dialogVisible5.value=false
	dialogVisible4.value = false
	dialogVisible3.value = false
	currentCaseIndex.value = 0
	dialogVisible2.value = false
	checked.value = false
	dialogVisible.value = false
	//无论还款方案拒绝与否,都重新查询一下正在调解中的案件
	getCaseList()
}
//当拒绝所有方案并提交原因时
const refuseAll = () => {
	//设置调解状态为失败
	 //setCaseStateToRefused(tableData.value[currentCaseIndex.value].caseId)
	ElMessage.error('你已拒绝所有方案,调解失败')
	setDefaultValues()

}


</script>

<template>
	<DetailedCase v-model="detailedDialog.visible" :case-id="detailedDialog.case?.caseId"></DetailedCase>
	<el-scrollbar height="500px">
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="caseId" label="案件号" width="100"/>
			<el-table-column prop="applicantName" label="申请人" width="100"/>
			<el-table-column prop="mediatorName" label="调解员" width="100"/>
			<el-table-column prop="mediationTime" label="调解时间" width="180">
				<template #default="scope">{{ Case.getMediationTime(scope.row) }}</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template #default="scope">
					<el-button type="success" size="small" @click="detailedDialog.look(scope.row)">查看详情</el-button>
					<el-button type="danger" size="small" @click="handleEnterRepayment(scope.$index)">进入调解</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-scrollbar>
	<el-dialog draggable v-model="dialogVisible" title="调解告知书" width="500" :before-close="handleClose">
		<span>
			一旦确定生效不可再次进行修改
		</span>
		<div>
			<el-checkbox v-model="checked" label="我已阅读并理解上述内容，并同意进行调解" size="large"/>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="handleRepaymentView" :disabled="!checked">
					查看调解方案
				</el-button>
			</div>
		</template>
	</el-dialog>

	<el-dialog draggable :close-on-press-escape="false"  v-model="dialogVisible2"  width="500">
		<template #header>
			<span>当前方案/总方案数: {{currentRepaymentIndex+1}}/{{totalRepaymentCount}}</span>
		</template>
		<div>
			<h4>这是第{{currentRepaymentIndex+1}}个调解方案</h4>
			<el-scrollbar height="400px">
				<viewRepayment :enable-t-o-eidt="false" :is-dialog="false" :repayment-model="repayments[currentRepaymentIndex]" />
			</el-scrollbar>
		</div>
		<template #footer>
			<el-button type="primary" @click="preCase">上一个</el-button>
			<el-button type="primary" @click="nextCase">下一个</el-button>
			<el-button type="success" @click="agreeRepayment(currentRepaymentIndex)">同意</el-button>
		</template>
	</el-dialog>

	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" draggable v-model="dialogVisible3" title="确认调解协议书" width="500">
		<span>兹经双方友好协商，达成如下协议,双方同意此调解结果，特立此书为证。</span>
		<template #footer>
			<el-button type="primary" @click="handleClose3">确认</el-button>
		</template>
	</el-dialog>

	<!--所有还款方案对话框-->
	<el-dialog :close-on-click-modal="false"  :close-on-press-escape="false" draggable title="所有还款方案" width="500px" v-model="dialogVisible4">
		<el-scrollbar height="400px">
			<div v-for="(item,index) in repayments">
			<span>方案{{index+1}}</span>
			<viewRepayment :enable-t-o-eidt="false" :is-dialog="false" :repayment-model="item" />
		</div>
		</el-scrollbar>
		<el-select style="margin-top: 20px" v-model="agreeRepaymentIndex" placeholder="请选择同意的方案">
			<el-option v-for="i in totalRepaymentCount" :label="'方案'+(i+1)" :value="i"></el-option>
		</el-select>
		<template #footer>
			<el-button v-show="false" typFe="danger" size="small" @click="dialogVisible5=true">拒绝所有方案</el-button>
			<el-button type="primary"  @click="dialogVisible3=true" :disabled="!agreeRepaymentIndex">选择该方案</el-button>
		</template>
	</el-dialog>

	<el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" draggable title="拒绝所有方案" width="500px" v-model="dialogVisible5">
		<el-form :model="refuseFormData" label-width="auto" :label-position="'top'">
			<el-form-item label="情况说明:">
				<el-input placeholder="请输入拒绝原因" type="textarea" :rows="2" v-model="refuseFormData.reason"></el-input>
			</el-form-item>

			<el-form-item label="相关材料证明:">
				<el-upload
					class="upload-demo"
					drag
					action="https://localhost:8080/upload"
					multiple
				>
					<el-icon class="el-icon--upload"><upload-filled /></el-icon>
					<div class="el-upload__text">
						支持拖拽  <em>点击上传文件</em>
					</div>
					<template #tip>
						<div class="el-upload__tip">

						</div>
					</template>
				</el-upload>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button type="primary" size="default" @click="refuseAll">提交</el-button>
		</template>
	</el-dialog>

</template>

<style scoped lang="css">
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>